<template>
  <div class="callback-container">
    <el-loading v-if="loading" :fullscreen="true" text="正在处理Gitee授权..." /> 
    <div v-else class="result-container">
      <div v-if="success" class="success-message">
        <el-icon class="success-icon"><svg viewBox="0 0 1024 1024" width="64" height="64"><path d="M512 64C264.58 64 64 264.58 64 512s200.58 448 448 448 448-200.58 448-448S759.42 64 512 64zm0 820c-206.45 0-374-167.55-374-374s167.55-374 374-374 374 167.55 374 374-167.55 374-374 374z" fill="#52c41a"/><path d="M789.63 293.77L469.03 614.37a32 32 0 0 1-45.25 0L234.37 428.77a32 32 0 0 1 45.25-45.25L446.43 541.66l297.95-297.94a32 32 0 1 1 45.25 45.25z" fill="#52c41a"/></svg></el-icon>
        <p class="text">Gitee授权成功，正在跳转登录...</p>
      </div>
      <div v-else class="error-message">
        <el-icon class="error-icon"><svg viewBox="0 0 1024 1024" width="64" height="64"><path d="M512 64C264.58 64 64 264.58 64 512s200.58 448 448 448 448-200.58 448-448S759.42 64 512 64zm0 820c-206.45 0-374-167.55-374-374s167.55-374 374-374 374 167.55 374 374-167.55 374-374 374z" fill="#ff4d4f"/><path d="M464 688a48 48 0 1 1 96 0 48 48 0 0 1-96 0zm26.94-254.78L512 510.18l21.06-76.96a20 20 0 0 1 38.72-6.68L595.38 496a20 20 0 0 1-24.44 29.48L512 539.69l-58.94 31.87a20 20 0 0 1-24.44-29.48l20.62-75.46a20 20 0 0 1 38.72 6.68z" fill="#ff4d4f"/></svg></el-icon>
        <p class="text">{{ errorMessage || 'Gitee授权失败，请重试' }}</p>
        <el-button type="primary" @click="goBackToLogin">返回登录页</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { post } from '@/utils/request'
import { useAuthStore } from '@/stores/authStore'

const router = useRouter()
// useRoute() 是 Vue Router 4 提供的一个 组合式 API ，
// 用于在 Vue 组件中获取当前路由的信息。
const route = useRoute()
// useRouter() ：返回路由器实例，用于执行路由操作（如跳转、替换路由等）
const authStore = useAuthStore()

const loading = ref(true)
//用于显示我的成功授权的消息
const success = ref(false)
const errorMessage = ref('')

onMounted(() => {
  handleGiteeCallback()
})

const handleGiteeCallback = async () => {
  try {
    // 获取URL中的code和state参数
    // ## route 对象的主要属性
// route 对象包含了当前路由的完整信息，主要属性包括：
// 属性                      类型                                    说明 
// query       Record<string, string | string[]>      URL 查询参数，如 ?code=xxx&state=yyy 
// params      Record<string, string>                 路由路径参数，如 /user/:id 中的 id 
// path               string                          当前路由的路径 
// fullPath           string                          包含查询参数的完整路径 
// name               string | null                   路由名称（如果已定义） 
// meta               RouteMeta                       路由元数据
    const code = route.query.code as string
    const state = route.query.state as string
    
    // 验证state参数，防止CSRF攻击
    const storedState = sessionStorage.getItem('gitee_oauth_state')
    
    if (!code || !state || state !== storedState) {
      throw new Error('无效的Gitee授权回调')
    }
    
    // 清除存储的state
    sessionStorage.removeItem('gitee_oauth_state')
    
    // 调用后端接口，使用code换取访问令牌并完成登录
    // 注意：这里的API路径可能需要根据您的后端实现进行调整
    const response = await post('/gitee/callback',{
      code
    })
    
    // 登录成功，设置认证状态
    authStore.setAuth(response)
    
    success.value = true
 
    // 延迟1秒后跳转到首页或重定向页面
//这个setTimeout是一个定时器，用于在指定的时间之后执行一次我的代码
//而我的window.setInterval是一个定时器，用于在指定的时间间隔内重复执行我的代码
    setTimeout(() => {
      // 获取重定向URL（如果存在）
      const redirect = localStorage.getItem('redirect_url') || '/home'
      localStorage.removeItem('redirect_url')
      router.replace(redirect)
    }, 1000)
  } catch (error: any) {
    console.error('Gitee授权回调处理失败', error)
    errorMessage.value = error.message || 'Gitee授权失败，请重试'
  } finally {
    loading.value = false
  }
}
// 返回登录页
const goBackToLogin = () => {
  router.replace('/home')
}
</script>

<style scoped>
.callback-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}

.result-container {
  text-align: center;
  padding: 40px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.success-message, .error-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.success-icon, .error-icon {
  margin-bottom: 20px;
}

.text {
  font-size: 16px;
  color: #303133;
}
</style>